<template>
	<el-container>
		<div class="right-panel">
			<div class="right-panel-search" style="width: 100%; margin-top: 5px; margin-bottom: 5px">
				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 10px">客户编码:</span>
					<el-input v-model="search.customerCode" placeholder="请输入客户编码" style="margin-left: 10px; width: 180px"
						clearable></el-input>
				</div>
				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 10px">客户名称:</span>
					<el-input v-model="search.customerName" placeholder="请输入客户名称" style="margin-left: 10px; width: 180px"
						clearable></el-input>
				</div>
				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 10px">片区:</span>
					<el-select v-model="search.region" placeholder="请选择片区" style="width: 180px; margin-left: 10px"
						filterable clearable @change="regionChange" @clear="clearSelect">
						<el-option v-for="item in regionList" :key="item.id" :label="item.label"
							:value="item.id"></el-option>
					</el-select>
				</div>

				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 10px">省/市/区:</span>
					<el-tree-select ref="seltree" v-model="search.province" :data="options"
						style="margin-left: 10px; width: 180px" show-checkbox show-all-levels clearable separator=" / "
						placeholder="请选择省/市/区" @check-change="handleCheckChange">
					</el-tree-select>

					<!-- <el-select placeholder="请选择省/市/区" style="margin-left: 10px; width: 180px">
            <template #prefix>
              <el-icon class="icon" size="18px" color="#000">
                <el-icon-Loading />
              </el-icon>
            </template>
          </el-select> -->
				</div>

				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 10px">渠道级别:</span>
					<!-- <el-input v-model="search.channelLevel" placeholder="请输入渠道级别" style="width: 180px; margin-left: 10px"
						clearable></el-input> -->

					<el-select v-model="search.channelLevel" class="m-2" style="margin-left: 10px; width: 180px" placeholder="请选择渠道级别">
						<!-- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
						 -->
						 <el-option key="vip" value="vip" label="vip"/>
						 <el-option key="二级" value="二级" label="二级"/>
						 <el-option key="三级" value="三级" label="三级"/>
						 <el-option key="终端" value="终端" label="终端"/>
					</el-select>

					<!-- <el-select
						v-model="search.channelLevel"
						placeholder="请选择渠道级别"
						style="width: 180px; margin-left: 10px"
						filterable
						clearable
						@change="channelLevelChange"
					>
						<el-option v-for="item in channelLevelList" :key="item.id" :label="item.label" :value="item.id"></el-option>
					</el-select> -->
				</div>
				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 10px">形态大类:</span>
					<el-input v-model="search.businessTypeCategory" placeholder="请输入形态大类"
						style="width: 180px; margin-left: 10px" clearable></el-input>
					<!-- <el-select
						v-model="search.businessTypeCategory"
						placeholder="请选择形态大类"
						style="width: 180px; margin-left: 10px"
						filterable
						clearable
						@change="businessTypeCategoryChange"
					>
						<el-option
							v-for="item in businessTypeCategoryList"
							:key="item.id"
							:label="item.label"
							:value="item.id"
						></el-option>
					</el-select> -->
				</div>
				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 10px">形态小类:</span>
					<el-input v-model="search.businessTypeSubcategory" placeholder="请输入形态小类"
						style="width: 180px; margin-left: 10px" clearable></el-input>
					<!-- <el-select
						v-model="search.businessTypeSubcategory"
						placeholder="请选择形态小类"
						style="width: 180px; margin-left: 10px"
						filterable
						clearable
						@change="businessTypeSubcategoryChange"
					>
						<el-option
							v-for="item in businessTypeSubcategoryList"
							:key="item.id"
							:label="item.label"
							:value="item.id"
						></el-option>
					</el-select> -->
				</div>
				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 10px">客户性质:</span>
					<el-input v-model="search.customerType" placeholder="请输入客户性质" style="margin-left: 10px; width: 180px"
						clearable></el-input>
				</div>
				<div class="panel-search-box">
					<el-button type="primary" style="margin-left: 10px" @click="upsearch">查询</el-button>
					<el-button type="" @click="cleanSearch">清空</el-button>
				</div>
			</div>
		</div>
		<el-header style="display: none"></el-header>
		<el-main class="nopadding">
			<scTable ref="table"  border :apiObj="apiObj" :params="params" stripe remoteSort remoteFilter
				@selection-change="selectionChange">
				<!-- <el-table-column type="selection" width="50"></el-table-column> -->

				<el-table-column label="客户编码" fixed="left" prop="customerCode" align="center" width="150"></el-table-column>
				<el-table-column label="客户名称" fixed="left" prop="customerName" align="center" width="150"></el-table-column>
				<el-table-column label="父客户编码" prop="parentCustomerCode" align="center" width="150"></el-table-column>
				<el-table-column label="父客户名称" prop="parentCustomerName" align="center" width="150"></el-table-column>
				<el-table-column label="父客户关系" prop="parentCustomerRelation" align="center" width="150"></el-table-column>
				<el-table-column label="片区" prop="region" align="center" width="150"></el-table-column>
				<el-table-column label="省份" prop="province" align="center" width="150"></el-table-column>
				<el-table-column label="城市" prop="city" align="center" width="150"></el-table-column>
				<el-table-column label="县区" prop="county" align="center" width="150"></el-table-column>
				<el-table-column label="渠道级别" prop="channelLevel" align="center" width="150"></el-table-column>
				<el-table-column label="商业形态大类" prop="businessTypeCategory" align="center" width="150"></el-table-column>
				<el-table-column label="商业形态小类" prop="businessTypeSubcategory" align="center" width="150"></el-table-column>
				<el-table-column label="客户性质" prop="customerType" align="center" width="150"></el-table-column>
				<el-table-column label="状态" prop="status" align="center" width="150">
					<template #default="scope">
						<el-tag v-if="scope.row.status == '正常'" type="success">{{ scope.row.status }}</el-tag>
						<el-tag v-else-if="scope.row.status == 0" type="danger">{{ scope.row.status }}</el-tag>
					</template>
				</el-table-column>
				<!-- <el-table-column label="操作" fixed="right" align="center" width="180">
					<template #default="scope">
						<el-button-group>
							<el-button text type="primary" size="small" @click="table_show(scope.row)">查看详情 </el-button>
						</el-button-group>
					</template>
				</el-table-column> -->
			</scTable>
		</el-main>
		<!-- <el-drawer v-model="tasksVisible" :size="450" title="任务中心" destroy-on-close>
			<tasks></tasks>
		</el-drawer> -->
	</el-container>
</template>

<script>
export default {
	name: 'customerList',
	data() {
		return {
			dialog: {
				info: false
			},
			search: {},
			apiObj: this.$API.customerCenter.customerList.list,
			params: {},
			regionList: [], //片区列表
			provinceList: [], //省份列表
			cityList: [], //城市列表
			countyList: [], //区县列表
			channelLevelList: [], //渠道级别列表
			businessTypeCategoryList: [], //形态大类列表
			businessTypeSubcategoryList: [], //形态小类列表
			options: [],
			loading: false
		}
	},
	watch: {
		groupFilterText(val) {
			this.$refs.group.filter(val)
		}
	},

	mounted() { },
	created() {
		this.getRegion()
		this.getChannelLevel()
		this.getBusinessTypeCategory()
		this.getBusinessTypeSubcategory()
		// this.$API.emp.getChinaTreeByArea.get({area : ""})
	},
	methods: {
		//获取片区列表
		async getRegion() {
			let res = await this.$API.plan.areas.get()
			res.data[0].children.forEach((item) => {
				if (item.children.length > 0) {
					this.regionList.push(...item.children)
				} else {
					this.regionList.push(item)
				}
			})
		},

		//通过片区获取对应省市区
		async getChinaTreeByArea(data) {
			let list = []
			if (data) {
				var res = await this.$API.emp.getChinaTreeByArea.get({ area: data })
			}
			if (res.code == '0') {
				list = res.data.map((province) => ({
					label: province.province,
					value: province.code,
					tag: 0,
					children: province.cities.map((city) => ({
						label: province.province + '/' + city.name,
						value: city.code,
						code: province.code,
						labels: city.name,
						tag: 1,
						province: province.province,
						children: city.area.map((area) => ({
							label: province.province + '/' + city.name + '/' + area.name,
							value: area.code,
							code: province.code,
							province: province.province,
							labels: city.name,
							citycode: city.code,
							areaName: area.name,
							areacode: area.code,
							tag: 2
						}))
					}))
				}))
			}
			this.loading = true
			this.options = list
		},
		clearSelect() {
			this.options = []
			this.search.province = ''
		},
		//获取可选省市区列表
		async getRegionArea() {
			let res = await this.$API.plan.areas.get()
			res.data[0].children.forEach((item) => {
				if (item.children.length > 0) {
					this.regionList.push(...item.children)
				} else {
					this.regionList.push(item)
				}
			})
		},
		//获取渠道级别列表
		async getChannelLevel() {
			let res = await this.$API.plan.areas.get()
			res.data[0].children.forEach((item) => {
				if (item.children.length > 0) {
					this.channelLevelList.push(...item.children)
				} else {
					this.channelLevelList.push(item)
				}
			})
		},
		//获取形态大类列表
		async getBusinessTypeCategory() {
			let res = await this.$API.plan.areas.get()
			res.data[0].children.forEach((item) => {
				if (item.children.length > 0) {
					this.businessTypeCategoryList.push(...item.children)
				} else {
					this.businessTypeCategoryList.push(item)
				}
			})
		},
		//获取形态小类列表
		async getBusinessTypeSubcategory() {
			let res = await this.$API.plan.areas.get()
			res.data[0].children.forEach((item) => {
				if (item.children.length > 0) {
					this.businessTypeSubcategoryList.push(...item.children)
				} else {
					this.businessTypeSubcategoryList.push(item)
				}
			})
		},
		regionChange(value) {
			if (!value) {
				this.search.region = ''
			} else {
				let obj = this.regionList.find((item) => item.id === value)
				this.search.region = obj.label
				this.getChinaTreeByArea(obj.label)
			}

			//获取可选省市区列表
			// this.getRegionArea()
		},
		provinceChange(value) {
			if (!value) {
				this.search.province = ''
			} else {
				let obj = this.provinceList.find((item) => item.id === value)
				this.search.province = obj.label
			}
		},
		cityChange(value) {
			if (!value) {
				this.search.city = ''
			} else {
				let obj = this.cityList.find((item) => item.id === value)
				this.search.city = obj.label
			}
		},
		countyChange(value) {
			if (!value) {
				this.search.county = ''
			} else {
				let obj = this.countyList.find((item) => item.id === value)
				this.search.county = obj.label
			}
		},
		channelLevelChange(value) {
			if (!value) {
				this.search.channelLevel = ''
			} else {
				let obj = this.channelLevelList.find((item) => item.id === value)
				this.search.channelLevel = obj.label
			}
		},
		businessTypeCategoryChange(value) {
			if (!value) {
				this.search.businessTypeCategory = ''
			} else {
				let obj = this.businessTypeCategoryList.find((item) => item.id === value)
				this.search.businessTypeCategory = obj.label
			}
		},
		businessTypeSubcategoryChange(value) {
			if (!value) {
				this.search.businessTypeSubcategory = ''
			} else {
				let obj = this.businessTypeSubcategoryList.find((item) => item.id === value)
				this.search.businessTypeSubcategory = obj.label
			}
		},
		//任务
		downTemp() {
			// 下载模板
		},
		//编辑
		table_edit(row) {
			this.dialog.edit = true
			this.$nextTick(() => {
				this.$refs.editDialog.open('edit').setData(row)
			})
		},
		//表格内开关
		async changeSwitch(val, row) {
			row.enable = row.enable === 1 ? 0 : 1
			row.$switch_status = true
			let data = {
				enable: val,
				staffNumber: row.staffNumber
			}
			var res = await this.$API.user.user.enable.post({ data: data })
			if (res && res.code === 0) {
				setTimeout(() => {
					delete row.$switch_status
					row.enable = val
					// console.log(typeof val, row)
					this.$message.success('操作成功')
				}, 500)
			}
		},

		//查看
		table_show(row) {
			this.dialog.info = true
			this.$nextTick(() => {
				this.$refs.infoDialog.setData(row)
			})
		},

		upsearch() {
			this.$refs.table.upData(this.search)
		},
		cleanSearch() {
			this.search = {}
			this.$refs.table.reload(this.search)
			this.options = []
		},
		//本地更新数据
		handleSuccess(data, mode) {
			if (mode === 'add') {
				data.id = new Date().getTime()
				this.$refs.table.tableData.unshift(data)
			} else if (mode === 'edit') {
				this.$refs.table.tableData
					.filter((item) => item.id === data.id)
					.forEach((item) => {
						Object.assign(item, data)
					})
			}
		}
	}
}
</script>

<style>
.header-btn-item {
	display: flex;
}
</style>
